<template>
<el-dialog :title="formDrawer.title" :visible.sync="formDrawer.visible" width="60%">
    <el-form ref="formDynamic" :v-loading="loading" :model="formDynamic" :rules="rules" class="attrFrom" label-width="8rem" label-position="right" @submit.native.prevent>
        <el-row :gutter="24">
            <el-col :span="10">
                <el-form-item label="规格模板名称" prop="rule_name" required>
                    <el-input placeholder="请输入标题名称" :maxlength="20" v-model="formDynamic.rule_name" />
                </el-form-item>
            </el-col>
        </el-row>
        <el-row :gutter="24">
            <el-col :span="24" v-for="(item, index) in formDynamic.spec" :key="index">
                <el-form-item>
                    <el-row :gutter="24">
                        <el-col :span="12"></el-col>
                    </el-row>
                    <div class="acea-row row-middle">
                        <span class="mr5">{{item.value}}</span>
                        <i class="el-icon-circle-close" @click="handleRemove(index)"></i>
                    </div>
                    <div class="rulesBox">
                        <div class="tags">
                            <el-tag class="mbr5" closable color="primary" v-for="(j, tx) in item.detail" :key="tx" :name="j" @close="handleRemove2(item.detail,tx)">{{j}}</el-tag>
                        </div>
                        <div class="appendAttrForm">
                            <el-input v-model="item.detail.attrsVal" class="appendInput" placeholder="请输入属性名称" />
                            <el-button type="primary" @click="createAttr(item.detail.attrsVal,index)">添加</el-button>
                        </div>
                    </div>
                </el-form-item>
            </el-col>
        </el-row>

        <el-row :gutter="24" v-if="isBtn">
            <el-col :span="10">
                <el-form-item label="规格名称">
                    <el-input v-model="attrsName" placeholder="请输入规格" />
                </el-form-item>
            </el-col>
            <el-col :span="10">
                <el-form-item label="规格值">
                    <el-input v-model="attrsVal" placeholder="请输入规格值" />
                </el-form-item>
            </el-col>
            <el-col :span="4">
                <el-button type="primary" @click="createAttrName">确定</el-button>
                <el-button @click="offAttrName">取消</el-button>
            </el-col>
        </el-row>
        <el-row :gutter="24">
            <el-col :span="10">
                <el-form-item>
                    <el-button type="primary" icon="md-add" @click="addBtn" v-if="!isBtn">添加新规格</el-button>
                </el-form-item>
            </el-col>
        </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handleSubmit('formDynamic')">确 定</el-button>
    </div>
</el-dialog>
</template>

<script>
import { readGoodsRuleApi,editGoodsRuleApi } from '@/api/product/rule'

export default {
    name: 'addAttr',
    data() {
        return {
            formDrawer: {
                visible: false,
                title: ''
            },
            loading: false,
            grid: {
                xl: 3,
                lg: 3,
                md: 12,
                sm: 24,
                xs: 24
            },
            index: 1,
            rules: {
                rule_name: [{
                    required: true,
                    message: '请输入规格名称'
                }]
            },
            formDynamic: {
                rule_name: '',
                spec: []
            },
            attrsName: '',
            attrsVal: '',
            formDynamicNameData: [],
            isBtn: false,
            formDynamicName: [],
            results: [],
            result: [],
            ids: 0
        }
    },
    methods: {
        showCreateDrawer() {
            this.formDrawer.visible = true;
            this.formDrawer.title = "新增产品属性";
        },
        onCancel() {
            this.clear()
        },
        // 添加按钮
        addBtn() {
            this.isBtn = true
        },
        // 详情
        getIofo(row) {
            this.formDrawer.visible = true
            this.ids = row.id
            readGoodsRuleApi({
                id: row.id
            }).then(res => {
                this.formDynamic = res.data.row;
                this.formDynamic.spec = res.data.row.rule_value;
            }).catch(res => {
                this.$message.error(res.msg)
            })
        },
        // 提交
        handleSubmit(name) {
            this.$refs[name].validate((valid) => {
                if (valid) {

                    if (this.formDynamic.spec.length === 0) {
                        return this.$message.warning('请至少添加一条商品规格！')
                    }

                    this.loading = true
                    this.formDynamic['rule_value'] = this.formDynamic.spec;
                    setTimeout(() => {
                        editGoodsRuleApi(this.formDynamic).then(res => {
                            this.loading = false
                            if (res.code == "200") {
                                this.$message.success(res.msg);
                                this.formDrawer.visible = false;
                                this.$emit("getList", {})
                            } else {
                                this.$message.error(res.msg);
                            }

                        }).catch(res => {
                            this.loading = false
                            this.$message.error(res.msg)
                        })
                    }, 1200)
                } else {
                    return false
                }
            })
        },
        clear() {
            this.$refs['formDynamic'].resetFields()
            this.formDynamic.spec = []
            this.isBtn = false
            this.attrsName = ''
            this.attrsVal = ''
        },
        // 取消
        offAttrName() {
            this.isBtn = false
        },
        // 删除
        handleRemove(index) {
            this.formDynamic.spec.splice(index, 1)
        },
        // 删除属性
        handleRemove2(item, index) {
            item.splice(index, 1)
        },
        // 添加规则名称
        createAttrName() {
            if (this.attrsName && this.attrsVal) {
                let data = {
                    value: this.attrsName,
                    detail: [
                        this.attrsVal
                    ]
                }
                this.formDynamic.spec.push(data)
                var hash = {}
                this.formDynamic.spec = this.formDynamic.spec.reduce(function (item, next) {
                    /* eslint-disable */
                    hash[next.value] ? '' : hash[next.value] = true && item.push(next);
                    return item
                }, [])
                this.attrsName = '';
                this.attrsVal = '';
                this.isBtn = false;
            } else {
                this.$message.warning('请添加规格名称或规格值');
            }
        },
        // 添加属性
        createAttr(num, idx) {
            if (num) {
                this.formDynamic.spec[idx].detail.push(num);
                var hash = {};
                this.formDynamic.spec[idx].detail = this.formDynamic.spec[idx].detail.reduce(function (item, next) {
                    hash[next] ? '' : hash[next] = true && item.push(next);
                    return item
                }, [])
            } else {
                this.$message.warning('请添加属性');
            }
        }
    }
}
</script>

<style lang="less" scoped>
.attrFrom {
    .mbr5 {
        margin-right: 5px;
        margin-bottom: 5px;
    }

    .appendAttrForm {
        display: flex;

        .appendInput {
            margin-right: 8px;
        }
    }

    /deep/ .dialog-footer {
        border-top: 1px solid #eee;
    }
}
</style>
